<html>  
    <head>  
        <meta charset="utf-8">  
        <title>HTML5 canvas 做画板画图 可以做电子白板</title>  
        <style type="text/css">  
        <!--  
          #container { position: relative;}  
          #imageView { border: 1px solid #000; }  
        --></style>  
  </head>  
  <body>  
    <div id="container">  
      <canvas id="imageView" width="800" height="500">  
      </canvas>  
    </div>  
    <script type="text/javascript">  
    var canvas;  
var context;  
var tool;  
  
/**  
 * called on window load.  
 */  
if(window.addEventListener){  
    window.addEventListener('load',  
            init(),  
            false);  
}  
  
/**  
 * init.  
 */  
function init(){  
    /**  
     * find the canvas element.  
     */  
    canvas = document.getElementById('imageView');  
    if(!canvas){  
        return;  
    }  
    if(!canvas.getContext){  
        return;  
    }  
  
    /**  
     * get the 2D canvas context.  
     */  
    context = canvas.getContext('2d');  
    if(!context){  
        return;  
    }  
  
    /**  
     * pencil tool instance.  
     */  
    tool = new tool_pencil();  
  
    /**  
     * attach the mousedown, mousemove and mouseup event listeners.  
     */  
    canvas.addEventListener('mousedown', ev_canvas, false);  
    canvas.addEventListener('mousemove', ev_canvas, false);  
    canvas.addEventListener('mouseup',   ev_canvas, false);  
      
}  
  
/**  
 * This painting tool   
 * works like a drawing pencil   
 * which tracks the mouse movements.  
 *   
 * @returns {tool_pencil}  
 */  
function tool_pencil(){  
    var tool = this;  
    this.started = false;  
  
    /**  
     * This is called when you start holding down the mouse button.  
     * This starts the pencil drawing.  
     */  
    this.mousedown = function (ev){  
        /**  
         * when you click on the canvas and drag your mouse  
         * the cursor will changes to a text-selection cursor  
         * the "ev.preventDefault()" can prevent this.  
         */  
        ev.preventDefault();  
        context.beginPath();  
        context.moveTo(ev._x,ev._y);  
        tool.started = true;  
    };  
  
    /**  
     * This is called every time you move the mouse.  
     * Obviously, it only draws if the tool.started state is set to true  
     */  
    this.mousemove = function (ev){  
        if(tool.started){  
            context.lineTo(ev._x,ev._y);  
            context.stroke();  
        }  
    };  
  
    /**  
     * This is called when you release the mouse button.  
     */  
    this.mouseup = function (ev) {  
        if(tool.started){  
            tool.mousemove(ev);  
            tool.started = false;  
        }  
    };  
}  
  
/**  
 * general-purpose event handler.  
 * determines the mouse position relative to the canvas element.  
 *   
 * @param ev  
 */  
function ev_canvas(ev){  
    var x,y;  
    if(ev.offsetX || ev.offsetY == 0){  
        ev._x = ev.offsetX;  
        ev._y = ev.offsetY;  
    }  
      
    /**  
     * call the event handler of the tool.  
     */  
    var func = tool[ev.type];  
    if (func) {  
      func(ev);  
    }  
}  
      
    </script>  
  </body>  
</html>